<template>
  <div class="container">
    <!-- 数据回填 -->
    <div v-show="$route.query.id" style="margin-bottom: 10px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- form表单-->
    <div class="input">
      <el-form :inline="true" :model="form" class="demo-form-inline" ref="form">
        <el-form-item label="标签名称">
          <el-input v-model="form.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态" class="status">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClear">清除</el-button>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="tag">
        <el-button type="text" @click.native="returnn" v-show="$route.query.id">
          ←返回学科
        </el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="handleChange('add')"
          >新增标签</el-button
        >
      </div>
    </div>
    <!-- alert重要信息展示 -->
    <el-alert
      :closable="false"
      class="alert"
      type="info"
      show-icon
      :title="alertText"
    >
    </el-alert>
    <!-- table表格-->
    <el-table style="width: 100%" :data="dataList">
      <el-table-column prop="id" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="130"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="tagName"
        label="标签名称"
        width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者"
        width="230"
        align="center"
      >
      </el-table-column>
      <el-table-column
        :formatter="formatTime"
        prop="addDate"
        label="创建日期"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="state" label="状态" align="center">
        <template slot-scope="scope">
          <span>{{ formatState(scope.row.state) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <!-- 操作按钮 -->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleStatus(scope.row)"
            v-text="scope.row.state === 1 ? '启用' : '禁用'"
          >
          </el-button>
          <!-- 编辑 -->
          <el-button
            size="mini"
            type="primary"
            @click="handleChange(scope.row.id)"
            :disabled="scope.row.state === 1 ? false : true"
          >
            编辑
          </el-button>
          <!-- 删除 -->
          <el-button
            size="mini"
            v-if="scope.row.status != 'deleted'"
            type="danger"
            @click="removeUser(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页-->
    <div class="pagination">
      <div class="pages">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :total="Number(this.form.total)"
          :page-size="this.form.pagesize"
          :page-sizes="[5, 10, 20, 50]"
          layout="sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 标签弹层 -->
    <directorys-add
      ref="edit"
      v-model="status"
      :id="id"
      @init="getList"
      v-if="status"
    >
    </directorys-add>
  </div>
</template>

<script>
// 引入方法
import { list, remove, changeState } from '@/api/hmmm/tags'
import directorysAdd from '../components/tags-add.vue'
export default {
  name: 'Tags',
  components: {
    directorysAdd
  },
  data () {
    return {
      timer: null,
      dataList: [],
      alertText: '',
      status: false,
      id: null,
      form: {
        state: null, // 状态
        counts: null, // 总记录数
        subjectID: null, // 学科ID
        tagName: null, // 标签名称
        pages: null, // 总页数
        total: null, // 面试题数量
        alert: null, // 数据列表
        addDate: null, // 添加日期
        page: 1, // 当前所在页
        pagesize: 5 // 一页多少条
      }
    }
  },
  watch: {
    $route (to, form) {
      this.form.subjectID = null
      this.getList()
    }
  },
  created () {
    if (this.$route.query.id) {
      this.form.subjectID = this.$route.query.id
    }
    this.getList()
  },
  methods: {
    // 时间过滤器
    formatTime (row) {
      const date = new Date(row.addDate)
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var month =
        date.getMonth() < 10 ? '0' + date.getMonth() : date.getMonth()
      var hours =
        date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return (
        date.getFullYear() +
        '/' +
        month +
        '/' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },
    // 获取列表数据
    async getList () {
      const data = await {
        subjectID: this.form.subjectID,
        tagName: this.form.tagName,
        state: this.form.state,
        page: this.form.page,
        pagesize: this.form.pagesize
      }
      list(data).then((res) => {
        this.dataList = res.data.items
        this.form.total = res.data.counts
        this.alertText = `共 ${this.form.total} 条记录`
        console.log(res)
      })
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagesize = val
      if (this.page === 1) {
        this.getList(this.data)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      console.log(val)
      this.form.page = val
      this.getList()
    },
    // 状态适配
    formatState (state) {
      // 根据传入的参数做适配
      const stateObj = {
        1: '启用',
        0: '禁用'
      }
      return stateObj[state]
    },
    // 清除按钮
    handleClear () {
      this.form.tagName = null
      this.form.state = null
    },
    // 搜索按钮
    handleSearch () {
      // console.log(tagName, state)
      if (this.timer) return
      this.timer = setTimeout(() => {
        this.getList()
        this.timer = null
      }, 1000)
    },
    // 新增标签、编辑标签
    handleChange (id) {
      this.status = true
      this.id = id
    },
    // 标签状态，启用、禁用
    async handleStatus (row) {
      try {
        const res = await changeState({
          id: row.id,
          state: row.state
        })
        this.$message.success('操作成功')
        console.log(res)
        row.state = row.state === 1 ? 0 : 1
      } catch (err) {
        this.$message.error('操作失败')
        console.log(err)
      }
    },
    // 删除按钮
    removeUser (user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then((response) => {
              this.$message.success('成功删除了用户' + '!')
              this.dataList.splice(user, 1)
              this.getList(this.form)
            })
            .catch((response) => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 数据回填
    returnn () {
      this.$router.push({
        path: 'list'
      })
    }
  }
}
</script>

<style scoped lang="scss">
// 版心布局样式
.container {
  margin-left: 10px;
  margin-top: 12px;
  margin-right: 10px;
  background-color: #fff;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
  // width: 100%;
  // height: 100%;
}
//分页
.pagination {
  margin-top: 20px;
}
.alert {
  margin-bottom: 15px;
}
.page {
  margin-top: 20px;
}
//数据条样式
.data {
  display: flex;
  width: 100%;
  padding: 8px 16px;
  background-color: #f4f4f5;
  color: #909399;
  box-sizing: border-box;
  border-radius: 4px;
  margin-bottom: 20px;
  .span {
    margin-left: 10px;
  }
}
//下拉框
.input {
  display: flex;
  width: 100%;
  // background-color: red;
  position: relative;
  .status {
    margin-left: 50px;
  }
  //新增标签样式
  .tag {
    position: absolute;
    right: 0px;
  }
}
</style>
